<template>
	<view class="tasks-page-detail-component">
		<view class="task-info">
			<view class="item-row">
				<view class="label">任务编号：</view>
				<view class="content auto-wrap">{{resObj.taskno}}</view>
			</view>
			<view class="item-row">
				<view class="label">任务类型：</view>
				<view class="content auto-wrap">{{resObj.tasktypename}}</view>
			</view>
			<view class="item-row">
				<view class="label">目标位置：</view>
				<view class="content auto-wrap">{{resObj.toplace}}</view>
			</view>
			<view class="item-row">
				<view class="label">起始位置：</view>
				<view class="content auto-wrap">{{resObj.sourceplace}}</view>
			</view>
			<view class="item-row">
				<view class="label">托盘编号：</view>
				<view class="content auto-wrap">{{resObj.containerCode}}</view>
			</view>
			<view class="item-row">
				<view class="label">创建人：</view>
				<view class="content auto-wrap">{{resObj.createdUserName}}</view>
			</view>
			<view class="item-row">
				<view class="label">创建时间：</view>
				<view class="content auto-wrap">{{resObj.createdTime}}</view>
			</view>
			<view class="item-row">
				<view class="label">更新人：</view>
				<view class="content auto-wrap">{{resObj.updatedUserName}}</view>
			</view>
			<view class="item-row">
				<view class="label">更新时间：</view>
				<view class="content auto-wrap">{{resObj.updatedTime}}</view>
			</view>
		</view>
		<view class="materials-head">
			<view class="materials-head-inner">
				<view class="line"></view>
				<view class="title">
					<text class="text">物料详情</text>
				</view>
			</view>
		</view>
		<view class="materials-containter">
			<view class="material-item-group">
				<!-- item start -->
				<view class="material-list-item" v-for="(item,index) in resList" :key="index">
					<view class="badge-box"><u-badge :value="index+1" bg-color="#F18201" /></view>
					<view class="item-row">
						<view class="label">物料编号：</view>
						<view class="content auto-wrap">{{item.materialno}}</view>
					</view>
					<view class="item-row">
						<view class="label">物料名称：</view>
						<view class="content auto-wrap">{{item.materialname}}</view>
					</view>
					<view class="item-row">
						<view class="label">批次号：</view>
						<view class="content auto-wrap">{{item.materialbatch}}</view>
					</view>
					<view class="item-row">
						<view class="label">尺寸：</view>
						<view class="content auto-wrap">{{item.materialspec}}</view>
					</view>
					<view class="item-row">
						<view class="label">密度：</view>
						<view class="content auto-wrap">{{item.materialDensity}}</view>
					</view>
					<view class="item-row">
						<view class="label">数量：</view>
						<view class="content auto-wrap">{{item.bindquantity}}</view>
					</view>
				</view>
				<!-- item end -->
			</view>
		</view>
	</view>
</template>

<script>
import { parseDic } from '@/static/js/utils/index.js'
export default {
	name:'tasksPageDetailComponent',
	props:{
		item: {
		  type: Object,
		  default: function(){
				return {}
			}
		}
	},
	data(){
		return {
			resObj:{},
			resList:[]
		}
	},
	methods:{
		init(){
			this.$api.get('GetPDATaskDetail',{id:this.item.id},{block:'task'}).then((res)=>{
				this.resObj.taskno = res.taskno
				this.resObj.tasktypename = parseDic(this.$store,'task_type',res.tasktype)
				this.resObj.toplace = res.toplace
				this.resObj.sourceplace = res.sourceplace
				this.resObj.containerCode = res.containerCode
				this.resObj.createdUserName = res.createdUserName
				this.resObj.createdTime = res.createdTime
				this.resObj.updatedUserName = res.updatedUserName
				this.resObj.updatedTime = res.updatedTime
				this.resList = res.wmsMaterials || []
			}).catch(err=>{
				console.log(err)
			})
		},
		reset(){
			this.resObj = {}
			this.resList = []
		}
	}
}
</script>

<style scoped lang="scss">
.tasks-page-detail-component{
	height: 100%;
	display: flex;
	flex-direction: column;
	.task-info,.materials-head{
		flex-shrink: 0;
	}
	.task-info{
		background-color: $uni-bg-color;
		padding: 12rpx 16rpx;
	}
	.materials-head{
		padding: 12rpx 16rpx 0 16rpx;
		.materials-head-inner{
			background-color: $uni-bg-color;
			border-radius: 6rpx 6rpx 0 0;
			position: relative;
			height: 50rpx;
			display: flex;
			align-items: center;
			&>.line{
				width: 100%;
				height: 2rpx;
				background-color: $uni-border-color;
			}
			&>.title{
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
				&>.text{
					font-size: 30rpx;
					background-color: $uni-bg-color;
					color: $uni-border-color;
					padding: 4rpx 12rpx;
				}
			}
		}
	}
	.materials-containter{
		flex-grow: 1;
		overflow: auto;
		padding:0 16rpx;
		.material-item-group{
			padding: 0 4rpx;
			background-color: $uni-bg-color;
			.material-list-item{
				border-bottom: 2rpx solid $uni-border-color;
				padding-bottom: 10rpx;
				padding-left: 60rpx;
				margin-bottom: 10rpx;
				position: relative;
				&:last-child{
					border-bottom: 0;
				}
				.badge-box{
					position: absolute;
					top:8rpx;
					left: 8rpx;
					z-index: 1;
				}
			}
		}
	}
	.item-row{
		display: flex;
		&>.label{
			flex-shrink: 0;
			color: $u-tips-color;
			width: 144rpx;
		}
		&>.content{
			flex-grow: 1;
			color: $u-content-color;
		}
	}
}
</style>